<template>
	<view>
		<view class="p-10">
			<view class="py-6 px-14 round-20 border-hint flex flex-x-space-between">
				<input placeholder="输入姓氏,搜索头像" v-model="query.name" class="fs-13 flex-1"  @confirm="search()"/>
				<uv-icon name="search" size="20" @click="search()"></uv-icon>
			</view>
		</view>
		<view class="vw-100 h-10  " style="background-color: #ecf4f4;"></view>

		<view class="px-8 pb-safe-area">
			<view class="flex flex-wrap grid-columns-3 grid-gap-10 p-10">
				<view v-for="(item,index) in list" :key="index">
					<image :src="item.image" class="w-100 round-6" style="height: 200rpx;"
						@click="$page.open('/pages/avatar/avatar?id='+item.id)"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { $http, $page } from '@/utils';
	const list = ref([])
	const name = ref('')
	const query = ref({
		name: '',
		page: 1,
		limit: 21
	})
	const status = ref(true)
	onLoad((e) => {
		if (e.name != '') {
			query.value.name = e.name
			getList()
		}
	})
	onReachBottom(() => {
		if (status.value) {
			query.value.page++
			getList()
		}
	})
	const search = () => {
		if (query.value.name == '') {
			return;
		}
		list.value = []
		status.value = true
		getList()
	}
	const getList = () => {

		$http.get('Avatar/getAvatar', query.value).then(res => {

			res.data.map(e => {
				list.value.push(e)
			})
			if (res.data.length < query.value.limit) {
				status.value = false
			}
		})
	}
</script>

<style>

</style>